<template>
	<view :id="templateId" class="container">
		<!-- <empty
			:src="baseTemplateFileUri + 'image/emptyStatus/common.png'"
			desc="功能即将开放"
			:showBtn="true"
			size="large"
		></empty> -->
		<view
      :style="themeStyles.backgroundMainColor"
      class="integral-wrap"
    >
      <view class="integral-card">
        <view class="df jc-sb ai-c integral-content">
          <view class="integral">
            <view class="name">我的积分</view>
            <view
              :style="themeStyles.textMainColor"
              class="num fs-bold"
            >2000</view>
          </view>
          <view class="btn-group">
            <button
              :style="themeStyles.btnAuxiliaryColor"
              class="df jc-c ai-c btn"
			  @click="loginNavTo(`/pages/integral/pages/integralDetail`)"
            >积分明细</button>
            <button
              :style="themeStyles.btnAuxiliaryColor"
              class="df jc-c ai-c btn"
			  @click="loginNavTo(`/pages/integral/pages/integralOrderList`)"
            >积分订单</button>
          </view>
        </view>
      </view>
    </view>

    <empty
      v-if="!goodsList.length"
      :src="baseTemplateFileUri + ' /image/emptyStatus/common.png'"
    ></empty>

    <view
      v-else
      class="goods-wrap"
    >
      <view class="goods-wrap__title">
        <trick-title
          :color="themeStyles.mainColor"
          :iconColor="themeStyles.lightMainColor"
          iconName="love"
          title="积分商品"
        ></trick-title>
      </view>
      <view class="goods-list">
        <view
          v-for="(item, index) in goodsList"
          :key="index"
          class="goods-item"
        >
          <uni-goods-col
            :routeLink="`/pages/integral/pages/goodsDetail?goodsId=${goodsId}`"
            :goods="item"
          >
            <template slot="metaLeft">
              <div
                :style="themeStyles.textMainColor"
                class="goods-integral"
              >{{item.integralNum}}积分</div>
            </template>
            <template slot="metaRight">
              <!-- <button
                :style="themeStyles.btnFullColor"
                class="goods-btn"
              >兑</button> -->
			  <text 
			  	:style="themeStyles.textMainColor"
			  	class="fs44 lh44 template__icon template__icon-tabbar-cart"></text>
            </template>
          </uni-goods-col>
        </view>
      </view>
	  <!-- 页面列表底部的有无数据提示 -->
	  <uni-load-more :status="loadingType"></uni-load-more>
    </view>
	</view>
</template>

<script>
/** components begin */
import uniLoadMore from "@/components/uniLoadMore/uniLoadMore";
import uniGoodsCol from "@/components/goods/uniGoodsCol";
import trickTitle from "@/components/trickTitle/trickTitle";
import empty from "@/components/empty";
/** components end */
export default {
	components: {
		uniLoadMore,
		uniGoodsCol,
		trickTitle,
		empty
	},

	data() {
		return {
			/* test */
			goodsId:"c14ba86209edea25a0bcc9e8d910e6e2",
			/*  */
			goodsList: [
				{
					goodsName: "男装/女装 (UT) The Brands MP 印花T恤(短袖) 424627 优衣库",
					integralNum: 200
				},
				{
					goodsName: "老王二号",
					integralNum: 200
				},
				{
					goodsName: "老王三号",
					integralNum: 200
				}
			]
		};
	},
	created(){
		//console.log(this.baseTemplateFileUri);
		/* test */
		this.goodsList.forEach(item=>{
			this.$set(item,"imagePath",this.baseTemplateFileUri+"image/user/vip_card_bg.png");
		})
		/* test */
	},
	onLoad() {
		setTimeout(() => {
			uni.setNavigationBarColor({
				frontColor: "#ffffff",
				backgroundColor: this.themeStyles.mainColor
			});
		}, 0);
	},

	methods: {}
};
</script>

<style lang="scss" scoped>
/* 积分模块的样式 --begin */
@import "../styles/common.scss";
/* 积分模块的样式 --end */
.container {
	background-color: $theme-main-bg-color;
}

/** 积分展示区域 begin */
.integral-wrap {
	position: relative;
	height: 240rpx;
	.integral-card {
		position: absolute;
		top: 64rpx;
		left: 24rpx;
		right: 24rpx;
		width: 702rpx;
		height: 236rpx;
		border-radius: 16rpx;
		padding: 0 32rpx;
		background-color: $theme-panel-bg-color;
		.integral-content {
			width: 100%;
			height: 100%;
			.integral {
				.name {
					font-size: $theme-size-base;
					color: $theme-color-base;
				}
				.num {
					margin-top: 2rpx;
					font-size: 48rpx;
					font-weight: 500;
				}
			}
			.btn-group {
				display: flex;
				flex-direction: row;
				.btn {
					margin-left: 36rpx;
					width: 168rpx;
					height: 76rpx;
					border: 2rpx solid;
					border-radius: 40rpx;
					font-size: $theme-size-base;
				}
			}
		}
	}
}

.goods-wrap {
	margin: 100rpx 24rpx 0;
	.goods-list {
		margin-top: 40rpx;
		.goods-item {
			margin-bottom: 20rpx;
			.goods-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 100%;
				width: 56rpx;
				height: 56rpx;
				font-size: 30rpx;
				font-weight: 600;
			}
		}
	}
}

/** 积分展示区域 end */
</style>